<template>
    <div id="MemoryInformation" ref="MemoryInformation" class="MemoryInformation">
        <el-row class="memoryTitle-box">
            <el-col :span="8">
                <p>
                    系统内存
                </p>
            </el-col>
            <el-col :span="8">
                <p>
                    PGA
                </p>
            </el-col>
            <el-col :span="8">
                <p>
                    SGA
                </p>
            </el-col>
        </el-row>
        <el-row class="memoryWaterPage-box">
            <el-col :span="24" class="waterPage">
                <div ref="waterPolo" class="page"></div>
            </el-col>
        </el-row>
        <el-row class="memoryText-box">
            <el-col :span="8">
                <p class="memoryitem">
                    可用：
                    <span class="lableNumber">
                        {{osData.MEMORYFREE_GB? osData.MEMORYFREE_GB + " GB" : " "}}
                    </span>
                </p>
                <p class="memoryitem">
                    总：
                    <span class="lableNumber">
                        {{osData.MEMORY_GB? osData.MEMORY_GB + " GB" : " "}}
                    </span>
                </p>
            </el-col>
            <el-col :span="8">
                <p class="memoryitem">
                    可用：
                    <span class="lableNumber">
                        {{dbData.PGA_FREE_SIZE? calcChu(dbData.PGA_FREE_SIZE, 1024).toFixed(2) + " GB" : " "}}
                    </span>
                </p>
                <p class="memoryitem">
                    总：
                    <span class="lableNumber">
                        {{dbData.PGA_TARGET? calcChu(dbData.PGA_TARGET, 1024).toFixed(2) + " GB" : " "}}
                    </span>
                </p>
            </el-col>
            <el-col :span="8">
                <p class="memoryitem">
                    可用：
                    <span class="lableNumber">
                        {{dbData.SGA_FREE_SIZE? calcChu(dbData.SGA_FREE_SIZE, 1024).toFixed(2) + " GB" : " "}}
                    </span>
                </p>
                <p class="memoryitem">
                    总：
                    <span class="lableNumber">
                        {{dbData.SGA_TARGET? calcChu(dbData.SGA_TARGET, 1024).toFixed(2) + " GB" : " "}}
                    </span>
                </p>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';

export default {
    data() {
        return {
            postData: {
                opera: 'dbpanlinfo',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid":""
                },
            },
            postOSData: {
                opera: 'ospanlinfo',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid":""
                },
            },
            freeGB: '',
            totalGB: '',
            waterPolo: {},
            pgaFreeGB: '',
            pgaTotalGB: '',
            sgaFreeGB: '',
            sgaTotalGB: '',
            EChartsOption: {
                series: [
                    //系统内存
                    {
                        radius: '68%',
                        type: 'liquidFill',
                        center: ['16%', '55%'],
                        data: [{value: 0}],
                        outline: {
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 4,
                                borderColor: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(69, 73, 240, 0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(69, 73, 240, .25)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(69, 73, 240, 1)'
                                    }],
                                    globalCoord: false
                                },
                                shadowBlur: 10,
                                shadowColor: '#000',
                            }
                        },
                        label: {
                            fontSize: 22,
                            color: 'rgb(0, 255, 0)'
                        },
                        backgroundStyle: {
                            color: {
                                type: 'linear',
                                x: 1,
                                y: 0,
                                x2: 0.5,
                                y2: 1,
                                colorStops: [{
                                    offset: 1,
                                    color: 'rgba(68, 145, 253, 0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(68, 145, 253, .25)'
                                }, {
                                    offset: 0,
                                    color: 'rgba(68, 145, 253, 1)'
                                }],
                                globalCoord: false
                            },
                        },
                    },
                    {
                        radius: '68%',
                        type: 'liquidFill',
                        center: ['50%', '55%'],
                        data: [{value: 0}],
                        outline: {
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 4,
                                borderColor: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(69, 73, 240, 0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(69, 73, 240, .25)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(69, 73, 240, 1)'
                                    }],
                                    globalCoord: false
                                },
                                shadowBlur: 10,
                                shadowColor: '#000',
                            }
                        },
                        label: {
                            fontSize: 22,
                            color: 'rgb(0, 255, 0)'
                        },
                        backgroundStyle: {
                            color: {
                                type: 'linear',
                                x: 1,
                                y: 0,
                                x2: 0.5,
                                y2: 1,
                                colorStops: [{
                                    offset: 1,
                                    color: 'rgba(68, 145, 253, 0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(68, 145, 253, .25)'
                                }, {
                                    offset: 0,
                                    color: 'rgba(68, 145, 253, 1)'
                                }],
                                globalCoord: false
                            },
                        },
                    },
                    {
                        radius: '68%',
                        type: 'liquidFill',
                        center: ['84%', '55%'],
                        data: [{value: 0}],
                        outline: {
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 4,
                                borderColor: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(69, 73, 240, 0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(69, 73, 240, .25)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(69, 73, 240, 1)'
                                    }],
                                    globalCoord: false
                                },
                                shadowBlur: 10,
                                shadowColor: '#000',
                            }
                        },
                        label: {
                            fontSize: 22,
                            color: 'rgb(0, 255, 0)'
                        },
                        backgroundStyle: {
                            color: {
                                type: 'linear',
                                x: 1,
                                y: 0,
                                x2: 0.5,
                                y2: 1,
                                colorStops: [{
                                    offset: 1,
                                    color: 'rgba(68, 145, 253, 0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(68, 145, 253, .25)'
                                }, {
                                    offset: 0,
                                    color: 'rgba(68, 145, 253, 1)'
                                }],
                                globalCoord: false
                            },
                        },
                    }
                ]
            },
            timerName: 'MemoryInformation',
            timerEventName: 'timerMemoryInformation',
            timerInterval: 1000 * 30,
            selectedMonID: {},
            dbData: {},
            osData: {}
        }
    },
    created() {
        bus.$on('selectedMonID', msg => {
            this.resetData();

            this.selectedMonID = msg;
            this.postData.filters.monid = this.selectedMonID.selectedDBMonID;
            this.getData();
            if (this.selectedMonID.hasOwnProperty('selectedOSMonID')) {
                this.postOSData.filters.monid = this.selectedMonID.selectedOSMonID;
                this.getOSData();
            }
        });
        
        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {
                // this.resetData();
                
                this.getData();
                if (this.selectedMonID.hasOwnProperty('selectedOSMonID')) {
                    this.postOSData.filters.monid = this.selectedMonID.selectedOSMonID;
                    this.getOSData();
                }
            }
        });
        
    },
    mounted() {
        // this.waterPolo = this.$echarts.init(this.$refs.waterPolo);
        
            this.waterPolo = this.$echarts.init(this.$refs.waterPolo);
        
        // this.drawMemoryLine();
    },
    computed: {
        
    },
    methods: {
        getData(){
            fetchData({
                postData : JSON.stringify(this.postData)
            }).then((res) => {
                if (res.data.length > 0) {
                    this.dbData = res.data[0];
                    if (this.dbData.PGA_TARGET != null && this.dbData.PGA_CURRENT_SIZE != null) {
                        this.dbData['PGA_FREE_SIZE'] = this.calcJian(this.dbData.PGA_TARGET, this.dbData.PGA_CURRENT_SIZE);
                        this.dbData['PGA_CURRENT_PER'] = this.calcChu(this.dbData.PGA_CURRENT_SIZE, this.dbData.PGA_TARGET);
                        this.EChartsOption.series[1].data[0].value = this.dbData.PGA_CURRENT_PER.toFixed(2);
                    }
                    if (this.dbData.SGA_TARGET != null && this.dbData.SGA_CURRENT_SIZE != null) {
                        this.dbData['SGA_FREE_SIZE'] = this.calcJian(this.dbData.SGA_TARGET, this.dbData.SGA_CURRENT_SIZE);
                        this.dbData['SGA_CURRENT_PER'] = this.calcChu(this.dbData.SGA_CURRENT_SIZE, this.dbData.SGA_TARGET);
                        this.EChartsOption.series[2].data[0].value = this.dbData.SGA_CURRENT_PER.toFixed(2);
                    }
                }
                this.drawMemoryLine();
            });
        },
        getOSData(){
            fetchData({
                postData : JSON.stringify(this.postOSData)
            }).then((res) => {
                if (res.data.length > 0) {
                    this.osData = res.data[0];
                    if (this.osData.MEMORY_GB != null) {
                        this.EChartsOption.series[0].data[0].value = this.calcChu(this.osData.MEMORYFREE_GB, this.osData.MEMORY_GB);
                    } else {
                        this.EChartsOption.series[0].data[0].value = 0;
                    }
                }
                this.drawMemoryLine();
            });
        },
        drawMemoryLine(){
           
                this.waterPolo.setOption(this.EChartsOption, true);
            
        },
        resetData() {
            this.dbData = {};
            this.EChartsOption.series[1].data[0].value = 0;
            this.EChartsOption.series[2].data[0].value = 0;
            this.osData = {};
            this.EChartsOption.series[0].data[0].value = 0;
        }
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
        
        this.waterPolo.dispose();
    },
    watch:{
        
    }
}
</script>

<style scoped>


.MemoryInformation{
    padding: 0px 5px;
    height: calc(100% - 22px - 8px);
    text-align: center;
    color: aliceblue;
}
.memoryTitle-box{
    padding-top: 1%;
    text-align: center;
}
.memoryWaterPage-box{
    height: 50%;
}
.memoryText-box{
    height: 25%;
    padding-top: 2%;
    text-align: center;
}



.basicImformation{
    background-color: rgba(0, 0, 0, 0);
}
.waterPage{
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.page{
    min-height: 105px;
}
.lableNumber{
    color: aliceblue;
    width: auto;
    font-size: smaller;
}
.memoryitem{
    font-size: 12px;
}
</style>    